<!--
 * @author  hemengxia
 游戏列表
-->
<template>
  <div class="game-list">
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :visible.sync="visible"
      title="游戏列表"
      fullscreen
      center
      @close="handleCancel()"
    >
      <section class="content">

        <section class="main-table">
          <v-table
            :list="list"
            tag="gameManage"
            :list-loading="listLoading"
            :filter-column="filtercolumn"
            @handleSelectionChange="handleSelectionChange"
          >
            <!--            <el-table-column label="操作" fixed="right" align="center" min-width="100"
                             class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="handleSelect(scope.row)">选择</el-button>
              </template>
            </el-table-column>-->
          </v-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList"
          />
        </section>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">取 消</el-button>
        <el-button style="padding: 8px 30px;" type="primary" @click="handleSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryList } from './api'
import elDragDialog from '@/directive/el-drag-dialog'
import VTable from '@/components/Table' // base on element-ui
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
  name: 'GameList',
  directives: { elDragDialog },
  components: { VTable, Pagination },
  props: {

    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: true,
      listLoading: false,
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      multipleSelection: []

    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleSelectionChange(arr) {
      this.multipleSelection = arr
    },
    filtercolumn(scope, item) {
      if (item === 'subAcntSt') {
        return (scope.row[item] === 0 || scope.row[item] === '0') ? '可用' : '不可用'
      } else if (item === 'subAcntStartTm' || item === 'subAcntEndTm') {
        if (scope.row[item]) {
          return scope.row[item].replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, '$1-$2-$3 $4:$5:$6')
        } else {
          return ''
        }
      } else {
        return scope.row[item]
      }
    },
    rowClass({ row, rowIndex }) {
      return {
        padding: '5px 0',
        height: '20px',
        background: 'rgba(247,247,248,1)'
      }
    },
    handleCancel() {
      this.$emit('cancel')
    },
    handleSubmit() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: '请选择游戏配置',
          type: 'warning'
        })
        return
      }
      this.$emit('selectGameConfig', this.multipleSelection[0])
    },
    getList(obj) {
      this.listLoading = true
      var query = {
        // userId: this.id,
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit
      }
      return new Promise((resolve, reject) => {
        queryList(query).then(response => {
          this.list = response.data.data
          // this.total = response.data.data.total
          this.listLoading = false
        }).catch(error => {
          this.listLoading = false
          reject(error)
        })
      })
    },
    handleSelect() {

    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

.game-list {
  position: relative;

  .header-content {
    height: 50px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .total-balance-content {
      font-weight: bold;

      .balance {
        font-size: 18px;
        @include font-color($mainColor);
      }
    }
  }

  /*  .game-list-inner {
      max-height: calc(100vh - 130px);
      min-height: calc(100vh - 130px);
      position: relative;

      &::after {
        content: '';
        height: 1px;
        background-color: #e2e3e8;
        position: absolute;
        bottom: 0;
        left: -20px;
        right: -20px;
      }
    }*/
}
</style>
